<template>
	<div class="search_header">
		<a class="prevbtn" @click.prevent="back">	
			<span class="prev rotate45"></span>
			<span class="prev1 rotate135"></span>
		</a>	
    	<div class="header_item search_warp" @click="gotoOtherSearch">
			<img src="../../images/搜索.png" alt="" class="searchicon" />	
    		<input ref="searchHot"  type="text"  placeholder="请输入用户名" class="serachBar" v-model="hottxt"  @keyup="changeSearch()">
    		<a @click.prevent = "cancle" class="delTxt" v-show="hasTxt">取消</a>
    	</div>
	</div>
</template>

<script>

	export default{
		props: ['isDisableinput'],
		mounted(){
			this.isDInput = this.isDisableinput;
		},
		data(){
			return{
				hottxt:'',
				hasTxt:false,
				isDInput:false
			}
		},
		methods:{
			cancle(){
				this.hottxt="";
				this.hasTxt = false;
			},
			back(){
				this.$emit("closeSearch")
			},
			addQuery(item){
				this.hasTxt=true
				this.hottxt = item.name;
			},
			changeSearch(){
				console.log('changed');
				if(this.hottxt.length>0){
					this.hasTxt=true
				}
				else{
					this.hasTxt=false;
				}
				this.$emit("addHistory",this.hottxt)
			},
			gotoOtherSearch(){
				if(this.isDInput){
					this.$router.push('/searchGirdList');
				}
			}
		}
	}
</script>

<style scoped>
.prev{background:#fff ;}
.prev1{background:#fff ;}
.header_item{display: block;float: left;margin-left: 0rem;}
.search_header{height: 1rem;overflow: hidden;background: #ff5000;}
.search_warp{border-radius: 0.04rem;border: .02rem solid rgba(0,0,0,.4);width: 4.2rem;height: 0.43rem;background: #F3F3F3;margin-left: .4rem;margin-top: .4rem;position: relative;overflow: hidden;}
.search_warp img.searchicon{width: 0.34rem;height: 0.34rem;position: absolute;left: .1rem;top:.04rem}
.search_warp.searchInput{border: none;outline: none;width: 2rem;margin-left: .4rem;background: none;color: #333333;font-size: .2rem;}
.serachBar{border: none;resize: none;width: 2.5rem;height: .4rem;font-size: .2rem;line-height: .4rem;margin-left: .4rem;background: none;}
.search_warp.searchInput{border: none;outline: none;width: 2rem;margin-left: .4rem;background: none;color: #333333;font-size: .2rem;}
.searchBtn{width: .4rem;height: .4rem;color: #333;font-size: .2rem;line-height: .4rem;margin-left: .2rem;margin-top: .4rem;}
.delTxt{width: .5rem;height: .5rem;color: #333;position: absolute;right: .02rem;top: .1rem;}
</style>